<template>
    <!-- 这是歌单详情，（父组件） -->
    <div>
        <!-- 路由传参 -->
        <ItemDetailstop :SongDetails="state.SongDetails"></ItemDetailstop>
        <ItemDetailscenter :SongDetails="state.SongDetails"></ItemDetailscenter>
        <ItemDetailsbottom :SongDetails="state.SongDetails"></ItemDetailsbottom>
        <ItemgedanList :SongDetails="state.SongDetails" :gedanlst="state.gedanlst"></ItemgedanList>

    </div>
</template>

<script>
import { useRoute } from 'vue-router';//可以从路由里面获取参数和数据
import { onMounted ,reactive } from 'vue';
import {SongDetails} from '@/api/index';
import {gedanlists} from '@/api/index';
import ItemDetailscenter from '@/components/details/item/ItemDetailscenter.vue'
import ItemDetailstop from '@/components/details/item/ItemDetailstop.vue'
import ItemDetailsbottom from '@/components/details/item/ItemDetailsbottom.vue'
import ItemgedanList from '@/components/details/item/ItemgedanList.vue'

export default {
    name: 'SongDetails',
    components:{
        ItemDetailstop,
        ItemDetailscenter,
        ItemDetailsbottom,
        ItemgedanList,

    },
    setup(){
        const state = reactive({
            SongDetails:{},//歌单详情页，可以用来传参给到子组件
            gedanlst:[]
        })
        onMounted( async ()=>{
            // console.log(useRoute());//返回一个对象
            // console.log(useRoute().query.id);
            let id = useRoute().query.id
            // 获取歌单详情
            let res = await SongDetails(id)
            // console.log(res);
            // 接收传参接口的数据，用来渲染页面
            state.SongDetails = res.data.playlist;

            // 获取歌单列表
            // console.log(state.SongDetails.trackIds);
            const ids = [];
            state.SongDetails.trackIds.forEach((trackIds) => {
                ids.push(trackIds.id)
                // console.log(ids);
            });
            let result = await gedanlists(ids)
            // console.log(result);
            // 接收接口的数据
            state.gedanlst = result.data.songs
            // console.log(state.gedanlst);
        })

        return { state }
    }
};
</script>

<style lang="scss" scoped>

</style>